<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="/templates/plantilla1.xhtml">

    <ui:define name="contenido">

        <h:form id="form7">
            <h2>Ejercicio 7 </h2>

            <h3>Lista de personas</h3>

            <p:commandLink value="Crear Nueva Persona" 
                           actionListener="#{ejercicio7Pag1Bean.abrirDialogoGuardarPersona(null)}"
                           process="@this" 
                           update=":form7:panelGuardarPersona :form7:headerDgGuardarPersona" />

            <p:dataTable id="personasTable" 
                         value="#{ejercicio7Pag1Bean.personaList}" 
                         var="p">

                <p:column headerText="RUT">
                    <h:outputText value="#{p.rut}" >
                        <f:converter converterId="rutConverter" />
                    </h:outputText>
                </p:column>

                <p:column headerText="Nombre">
                    <h:outputText value="#{p.nombre}" />
                </p:column>
                
                <p:column headerText="Mascotas">
                    <p:dataList value="#{p.mascotaList}" var="m" emptyMessage="" >
                        <h:outputText value="#{m.nombre} [#{m.tipoMascota.nombre}]" />
                    </p:dataList>
                </p:column>

                <p:column headerText="Acciones">
                    <p:commandLink value="Editar"
                                   actionListener="#{ejercicio7Pag1Bean.abrirDialogoGuardarPersona(p)}"
                                   process="@this"
                                   update=":form7:panelGuardarPersona :form7:headerDgGuardarPersona"/>
                    <br/>
                    <p:commandLink value="Eliminar"
                                   actionListener="#{ejercicio7Pag1Bean.seleccionarPersona(p)}"
                                   process="@this"
                                   update="@this"
                                   oncomplete="cdEliminarWV.show()" />
                </p:column>

            </p:dataTable>

            <p:dialog id="dgGuardarPersona" 
                      widgetVar="wvGuardarPersona"
                      modal="true"
                      height="400"
                      width="800">

                <f:facet name="header">
                    <p:outputPanel id="headerDgGuardarPersona">
                        <h:outputText  value="Crear Persona" rendered="#{ejercicio7Pag1Bean.persona.rut == null}" />
                        <h:outputText  value="Editar Persona" rendered="#{ejercicio7Pag1Bean.persona.rut != null}" />
                    </p:outputPanel>
                </f:facet>

                <p:outputPanel id="panelGuardarPersona">

                    <table>
                        <tr>
                            <th>* Rut</th>
                            <td>
                                <h:inputText id="rut" value="#{ejercicio7Pag1Bean.persona.rut}" 
                                             required="true" converter="rutConverter" />
                            </td>
                            <td>
                                <p:message for="rut" />
                            </td>
                        </tr>
                        <tr>
                            <th>* Nombre:</th>
                            <td>
                                <h:inputText id="nombre" value="#{ejercicio7Pag1Bean.persona.nombre}"
                                             required="true" >
                                    <f:validateLength maximum="10" />
                                </h:inputText>
                            </td>
                            <td>
                                <p:message for="nombre" />
                            </td>
                        </tr>
                        <tr>
                            <th>Fecha Nacimiento:</th>
                            <td>
                                <p:calendar id="fecha" value="#{ejercicio7Pag1Bean.persona.fechaNacimiento}" readonlyInput="true"
                                            navigator="true" pattern="dd/MM/yyyy" yearRange="c-100:c+0" showOn="button" />
                            </td>
                            <td>
                                <p:message for="fecha" />
                            </td>
                        </tr>
                        <tr>
                            <th>Email:</th>
                            <td>
                                <h:inputText id="email" value="#{ejercicio7Pag1Bean.persona.email}" />
                            </td>
                            <td>
                                <p:message for="email" />
                            </td>
                        </tr>
                    </table>
                    
                    <p:commandButton value="Guardar" 
                                     process=":form7:panelGuardarPersona" 
                                     update=":form7:panelGuardarPersona :form7:personasTable"
                                     actionListener="#{ejercicio7Pag1Bean.guardarPersona()}" />
                    <p:commandButton type="button" value="Cancelar"  onclick="wvGuardarPersona.hide()" />

                </p:outputPanel>

            </p:dialog>
            
            
            <p:confirmDialog id="cdEliminar" widgetVar="cdEliminarWV" message="" severity="alert">
                <f:facet name="header">Confirmación</f:facet>
                <f:facet name="message">¿Esta seguro que desea eliminar el usuario?</f:facet>
                
                <p:commandButton value="Eliminar"
                                 process="@this"
                                 update=":form7:personasTable"
                                 actionListener="#{ejercicio7Pag1Bean.eliminarPersona()}"
                                 oncomplete="cdEliminarWV.hide()"/>
                                     
                <p:commandButton value="Cancelar" 
                                 type="button"
                                 onclick="cdEliminarWV.hide()" />
                
            </p:confirmDialog>
                             
        </h:form>

    </ui:define>
</ui:composition>